<template>
  <div class="super-screen-container">
    <!-- 大屏标题 -->
    <div class="screen-header">
      <h1>电影市场数据可视化平台</h1>
      <div class="time-info">
        <span class="date">{{ currentDate }}</span>
        <span class="time">{{ currentTime }}</span>
      </div>
    </div>

    <!-- 数据展示区域 -->
    <div class="screen-body">
      <!-- 左侧图表区域 -->
      <div class="left-charts">
        <div class="chart-panel" ref="lineChart"></div>
        <div class="chart-panel" ref="pieChart"></div>
      </div>

      <!-- 中间大图 -->
      <div class="center-radar" ref="radarChart"></div>

      <!-- 右侧图表区域 -->
      <div class="right-charts">
        <div class="chart-panel" ref="barChart"></div>
        <div class="chart-panel" ref="qualityChart"></div>
      </div>
    </div>

    <!-- 底部装饰 -->
    <div class="screen-footer">
      <div class="decoration-line"></div>
      <div class="copyright">© 2024 电影市场数据分析系统</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import * as echarts from 'echarts'

// 图表引用
const lineChart = ref(null)
const barChart = ref(null)
const pieChart = ref(null)
const radarChart = ref(null)
const qualityChart = ref(null)

// 当前时间
const currentTime = ref('')
const currentDate = ref('')
let timer = null

// 初始化图表
const initCharts = () => {
    // 月度票房趋势图（折柱混合）
    const lineInstance = echarts.init(lineChart.value)
    lineInstance.setOption({
      backgroundColor: 'rgba(0,0,0,0.3)',
      title: { 
        text: '月度票房趋势', 
        left: 'left',
        textStyle: { color: '#fff' }
      },
      tooltip: { 
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      legend: {
        data: ['票房收入', '同比增长'],
        textStyle: { 
          color: '#fff',
          fontSize: 12
        },
        right: 10,
        top: 0
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月'],
        axisLabel: { color: '#fff' }
      },
      yAxis: [
        {
          type: 'value',
          name: '票房(万)',
          axisLabel: { 
            color: '#fff',
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '增长率(%)',
          axisLabel: { 
            color: '#fff',
            formatter: '{value}%'
          }
        }
      ],
      series: [
        {
          name: '票房收入',
          type: 'bar',
          barWidth: '40%',
          data: [285, 320, 410, 398, 450],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#83bff6' },
              { offset: 0.5, color: '#188df0' },
              { offset: 1, color: '#188df0' }
            ])
          },
          emphasis: {
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2378f7' },
                { offset: 0.7, color: '#2378f7' },
                { offset: 1, color: '#83bff6' }
              ])
            }
          }
        },
        {
          name: '同比增长',
          type: 'line',
          yAxisIndex: 1,
          data: [0, 12.3, 28.1, -2.9, 13.1],
          symbol: 'circle',
          symbolSize: 10,
          lineStyle: {
            width: 3,
            color: '#e74c3c'
          },
          itemStyle: {
            color: '#e74c3c',
            borderColor: '#fff',
            borderWidth: 2
          }
        }
      ]
    })

    // 类型票房漏斗图
    const barInstance = echarts.init(barChart.value)
    const funnelData = [
      { value: 689, name: '动作片', itemStyle: { color: '#e74c3c' } },
      { value: 532, name: '科幻片', itemStyle: { color: '#3498db' } },
      { value: 478, name: '爱情片', itemStyle: { color: '#2ecc71' } },
      { value: 415, name: '动画片', itemStyle: { color: '#f1c40f' } },
      { value: 389, name: '纪录片', itemStyle: { color: '#9b59b6' } }
    ]

    barInstance.setOption({
      backgroundColor: 'rgba(0,0,0,0.3)',
      title: {
        text: '类型票房转化分析',
        left: 'center',
        textStyle: { 
          color: '#fff',
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}万元 ({d}%)',
        backgroundColor: 'rgba(0,0,0,0.7)',
        borderColor: 'rgba(255,255,255,0.3)',
        textStyle: { color: '#fff' }
      },
      legend: {
        data: funnelData.map(item => item.name),
        textStyle: { color: '#fff' },
        bottom: 10,
        itemWidth: 12,
        itemHeight: 12
      },
      series: [{
        name: '票房转化',
        type: 'funnel',
        left: '10%',
        top: 60,
        bottom: 60,
        width: '80%',
        min: 0,
        max: 700,
        minSize: '10%',
        maxSize: '100%',
        sort: 'descending',
        gap: 8,
        label: {
          show: true,
          position: 'inside',
          formatter: '{b}\n{c}万',
          color: '#fff',
          fontSize: 12,
          lineHeight: 18
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 1,
          borderRadius: 5
        },
        emphasis: {
          label: {
            fontWeight: 'bold'
          }
        },
        data: funnelData,
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      }]
    })

    // 玫瑰图（观众类型分布）
    const pieInstance = echarts.init(pieChart.value)
    pieInstance.setOption({
      backgroundColor: 'rgba(0,0,0,0.3)',
      title: { 
        text: '观众类型分布', 
        left: 'center',
        textStyle: { color: '#fff' }
      },
      tooltip: { 
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        top: '5%',
        left: 'center',
        textStyle: { color: '#fff' }
      },
      series: [{
        name: '观众类型',
        type: 'pie',
        radius: ['30%', '70%'],
        center: ['50%', '60%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8,
          borderColor: 'rgba(255,255,255,0.5)',
          borderWidth: 2
        },
        label: {
          color: '#fff',
          fontSize: 12
        },
        labelLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)'
          }
        },
        data: [
          { value: 45, name: '学生群体', itemStyle: { color: '#3498db' } },
          { value: 32, name: '情侣观众', itemStyle: { color: '#e74c3c' } },
          { value: 18, name: '家庭观众', itemStyle: { color: '#2ecc71' } },
          { value: 5, name: '企业包场', itemStyle: { color: '#9b59b6' } }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200
        }
      }]
    })

  // 电影类型票房动态排序柱状图(加速版)
  const radarInstance = echarts.init(radarChart.value)
  
  const movieData = [
    { name: '动作片', value: 689, color: '#e74c3c' },
    { name: '科幻片', value: 532, color: '#3498db' },
    { name: '爱情片', value: 478, color: '#2ecc71' },
    { name: '动画片', value: 415, color: '#f1c40f' },
    { name: '纪录片', value: 389, color: '#9b59b6' },
    { name: '喜剧片', value: 356, color: '#1abc9c' },
    { name: '恐怖片', value: 312, color: '#d35400' },
    { name: '战争片', value: 298, color: '#34495e' },
    { name: '悬疑片', value: 275, color: '#8e44ad' },
    { name: '歌舞片', value: 243, color: '#16a085' },
    { name: '武侠片', value: 220, color: '#c0392b' },
    { name: '奇幻片', value: 198, color: '#2980b9' },
    { name: '历史片', value: 175, color: '#27ae60' }
  ]

  let sortedData = [...movieData].sort((a, b) => b.value - a.value)
  
  radarInstance.setOption({
    backgroundColor: 'rgba(0,0,0,0.3)',
    title: {
      text: '电影类型票房排行',
      subtext: '数据更新时间: ' + new Date().toLocaleDateString(),
      left: 'center',
      textStyle: { 
        color: '#fff',
        fontSize: 18
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      formatter: '{b}: {c}万元',
      backgroundColor: 'rgba(0,0,0,0.7)',
      borderColor: 'rgba(255,255,255,0.3)',
      textStyle: { color: '#fff' }
    },
    xAxis: {
      type: 'category',
      data: sortedData.map(item => item.name),
      axisLabel: {
        interval: 0,
        color: '#fff',
        rotate: 30
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.3)'
        }
      },
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      name: '票房(万元)',
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.1)'
        }
      }
    },
    series: [{
      name: '票房',
      type: 'bar',
      data: sortedData.map(item => ({
        value: item.value,
        itemStyle: {
          color: item.color
        }
      })),
      barWidth: '60%',
      label: {
        show: true,
        position: 'top',
        formatter: '{c}',
        color: '#fff'
      },
      itemStyle: {
        borderRadius: [4, 4, 0, 0]
      },
      animationDuration: 2000,
      animationEasing: 'elasticOut'
    }]
  })

  // 定时更新排序动画(1秒间隔)
  setInterval(() => {
    sortedData = [...sortedData].sort(() => Math.random() - 0.5)
    radarInstance.setOption({
      xAxis: {
        data: sortedData.map(item => item.name)
      },
      series: [{
        data: sortedData.map(item => ({
          value: item.value,
          itemStyle: {
            color: item.color
          }
        }))
      }]
    })
  }, 1000)

  window.addEventListener('resize', function() {
    radarInstance.resize()
  })
  
  window.addEventListener('resize', function() {
    radarInstance.resize()
  })
  



  // 影片质量评估图
  const qualityInstance = echarts.init(qualityChart.value)
  qualityInstance.setOption({
    backgroundColor: 'rgba(0,0,0,0.3)',
    title: { 
      text: '影片质量评估', 
      left: 'left',
      textStyle: { color: '#fff' }
    },
    radar: {
      indicator: [
        { name: '上座率', max: 100 },
        { name: '口碑评分', max: 5 },
        { name: '票房收入', max: 100 },
        { name: '续看意愿', max: 100 },
        { name: '衍生品销售', max: 100 }
      ],
      axisLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
      splitLine: { lineStyle: { color: 'rgba(255,255,255,0.3)' } },
      splitArea: { show: false },
      axisName: { color: '#fff' }
    },
    series: [{
      type: 'radar',
      data: [
        {
          value: [85, 4.2, 78, 82, 65],
          name: '当前影片',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { width: 3, color: '#e74c3c' },
          areaStyle: { color: 'rgba(231,76,60,0.3)' }
        },
        {
          value: [72, 3.8, 65, 68, 58],
          name: '行业平均',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { width: 3, color: '#3498db' },
          areaStyle: { color: 'rgba(52,152,219,0.3)' }
        }
      ]
    }]
  })

  // 窗口大小变化时重新调整图表大小
  window.addEventListener('resize', function() {
    lineInstance.resize()
    barInstance.resize()
    pieInstance.resize()
    radarInstance.resize()
    qualityInstance.resize()
  })
}

// 更新时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })
  currentDate.value = now.toLocaleDateString('zh-CN')
}

onMounted(() => {
  initCharts()
  updateTime()
  timer = setInterval(updateTime, 1000)
})

onBeforeUnmount(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped lang="scss">
.super-screen-container {
  width: 100%;
  height: 100vh;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0c29 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
  padding: 20px;
  box-sizing: border-box;

  .screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    position: relative;

    h1 {
      font-size: 32px;
      margin: 0 auto;
      background: linear-gradient(to right, #30cfd0, #c43ad6);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
      letter-spacing: 2px;
      text-align: center;
      width: 100%;
    }

    .time-info {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      position: absolute;
      right: 0;
      .date {
        font-size: 16px;
        color: #aaa;
      }

      .time {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
      }
    }
  }

  .screen-body {
    display: flex;
    height: calc(100% - 120px);
    gap: 20px;

    .left-charts, .right-charts {
      width: 25%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .center-radar {
      flex: 1;
      background: rgba(16, 31, 63, 0.3);
      border-radius: 8px;
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(48, 207, 208, 0.1) 0%, rgba(196, 58, 214, 0.1) 100%);
        z-index: 0;
      }
    }

    .chart-panel {
      flex: 1;
      background: rgba(16, 31, 63, 0.5);
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(to right, #30cfd0, #c43ad6);
      }
    }
  }

  .screen-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .decoration-line {
      width: 80%;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5), transparent);
      margin-bottom: 5px;
    }

    .copyright {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.5);
    }
  }
}

/* 动画效果 */
@keyframes glow {
  0% { box-shadow: 0 0 5px rgba(48, 207, 208, 0.5); }
  50% { box-shadow: 0 0 20px rgba(196, 58, 214, 0.8); }
  100% { box-shadow: 0 0 5px rgba(48, 207, 208, 0.5); }
}

.center-radar {
  animation: glow 3s infinite alternate;
}
</style>
